<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li><input id="id1" type="checkbox" name="likes" value="1" />足球</li>
        <li><input id="id2" type="checkbox" name="likes" value="2" />乒乓球</li>
        <li><input id="id3" type="checkbox" name="likes" value="3" />蓝球</li>
        <li><input id="id4" type="checkbox" name="likes" value="4" />羽毛球</li>
        <li><input id="id5" type="checkbox" name="likes" value="5" />玻璃球</li>
        <li><input id="id6" type="checkbox" name="likes" value="6" />网球</li>
    </ul>
    <button onclick="select_or_not(true)">全选</button>
    <button onclick="select_or_not(false)">全不选</button>
    <button onclick="selectNo()">反选</button>
    <script>
        // 原生属性 除了 id class type name 等 之外 
        // 还有几个特殊的  checked  selected disabled 
        // 获取的结果是 布尔类型  也可以设置布尔类型的值 
        // var ele = document.getElementById('id3');
        // console.log(ele.checked);
        // ele.checked = false
        // console.log(ele.checked);


        function select_or_not(flag){
            for(var i=1;i<7;i++){
                // i 123456
                document.getElementById('id'+i).checked = flag
                
            }
        }

        function selectNo(){
            for(var i=1;i<7;i++){
                // i 123456
                var target = document.getElementById('id'+i);
                if(target.checked){
                    target.checked = false
                }else{
                    target.checked = true;
                }
                
            }
        }
    </script>
</body>
</html>